import React, {useEffect, useState} from 'react';
import {View,} from '@tarojs/components';


import styles from './index.module.scss';
import {Search} from "@taroify/core";
import Bubble from "@/mall/pages/search/Bubble";

const Index: React.FC = () => {
    const [historySearch, setHistorySearch] = useState<any>([]);

    useEffect(() => {
        load();
    }, []);

    const load = async () => {
        setHistorySearch([
            "鸡",
            "电脑",
            "iPhone12",
            "车载手机支架",
            "自然堂",
            "小米 10",
            "原浆古井贡酒",
            "欧米伽",
            "华为",
            "针织半身裙",
            "氢跑鞋",
            "三盒处理器"
        ])
    }

    return (
        <View className={styles.page}>
            <view className={styles.page_head}>
                <Search shape={"rounded"} placeholder="iphone 13 火热发售中"/>
            </view>
            <view className={styles.page_body}>
                <view className={styles.page_body_top}>
                    <view className={styles.page_body_top_left}>
                        历史搜索
                    </view>
                    <view className={styles.page_body_top_right}>
                        清除
                    </view>
                </view>
                <view className={styles.page_body_center}>
                    {historySearch.map((item, index) => (
                        <Bubble title={item} key={index}></Bubble>
                    ))}
                </view>
            </view>
            <view className={styles.page_foot}>
                <view className={styles.page_foot_top}>
                    热门搜索
                </view>
                <view className={styles.page_foot_center}>
                    {historySearch.map((item, index) => (
                        <Bubble title={item} key={index}></Bubble>
                    ))}
                </view>
            </view>

        </View>
    );
};

export default Index;
